@extends('admin.layouts.index')
@section('title', '图文分享卡片制作')
@section('content')
<link rel="stylesheet" type="text/css" href="/assets/css/card-setting.css">
<script src="https://file.wailian1.cn/admin/js/public/clipboard.min.js"></script>
<script type="text/javascript" src="https://file.wailian1.cn/admin/assets/admin/js/public/image.upload.min.js"></script>
<script type="text/javascript" src="https://file.wailian1.cn/admin/assets/admin/js/libs/image-conversion/conversion.js"></script>
<script src="https://wailiancn.oss-cn-beijing.aliyuncs.com/assets/js/v2/qrcode.min.js?versionId=CAEQIRiBgICI8_PA_RciIDE1ZmZiMmM2NmIyODRmMDE4Mzg0NWM5YTY5OTE5MDI0"></script>
<script type="text/javascript" src="/assets/admin/js/public/card.setting.min.js?v=2023111501"></script>
<input type="hidden" id="platfrom" value="{{ $platfrom }}">
<div class="row">
    <div class="col-xl-6 col-mb-6">
        <div class="card">
            <div class="card-body">
                <div class="m-form-item" style="margin-bottom:0;">
                    <label>卡片类型:<font>点击查看 <a href="https://www.tiantianwailian.com/news/1149.html" target="_blank" id="create_notice">抖音卡片制作教程</a></font></label>
                    <div class="badge-lists">
                        <ul id="platfrom_list">
                            <li value="dy" id="platfrom_dy" class="active" style="margin-bottom:10px;"><i class="iconfont icon-douyin"></i>抖音卡片</li>
                            <li value="wx" id="platfrom_wx"><i class="iconfont icon-weixin1"></i>微信卡片</li>
                            <li value="zh" id="platfrom_zh"><i class="iconfont icon-zhihu" style="font-size:18px;"></i>知乎卡片</li>
                        </ul>
                    </div>
                </div>
                <div class="m-form-item">
                    <label>链接类型:</label>
                    <div class="badge-lists">
                        <ul id="link_type">
                            <li value="wx" class="active mr-2"><i class="iconfont icon-ziyuan"></i>微信外链</li>
                            <li value="kf"><i class="iconfont icon-xingzhuang"></i>客服外链</li>
                        </ul>
                    </div>
                </div>
                <div class="m-form-item" id="link_type_wx">
                    <label><b>*</b>微信外链:<font>点击前往<a href="/admin/links_lists/links_lists_add">创建微信外链</a></font></label>
                    <div class="m-col-6 m-xs-12">
                        <select class="m-select" id="links_id" name="links_id" onchange="showDouyinCard(1);">
                            @forelse($linkLists as $linkList)
                            <option value="{{ $linkList->links_id }}">{{ empty($linkList->remark) ? $linkList->title : $linkList->remark }}</option>
                            @empty
                            <option value="">当前暂无微信外链</option>
                            @endforelse
                        </select>
                    </div>
                </div>
                <div class="m-form-item" id="link_type_kf" style="display:none;">
                    <label><b>*</b>微信客服外链:<font>点击前往<a href="/admin/wxkf/wxkf_list">管理微信客服外链</a></font></label>
                    <div class="m-col-6 m-xs-12">
                        <select class="m-select" id="kfid" name="kfid" onchange="showDouyinCard(2);">
                            @forelse($workLinks as $workLink)
                            <option value="{{ $workLink->kfid }}">{{ $workLink->remark }}</option>
                            @empty
                            <option value="">当前暂无微信客服外链</option>
                            @endforelse
                        </select>
                    </div>
                </div>
                <div class="m-form-item">
                    <label><b>*</b>卡片标题:</label>
                    <input type="text" id="dycard_title" class="m-input" placeholder="请输入卡片标题" onchange="cardEditChange(this);">
                </div>
                <div class="m-form-item" id="card_describe_row">
                    <label><b>*</b>卡片描述:</label>
                    <input type="text" id="dycard_describe" class="m-input" placeholder="请输入卡片描述" onchange="cardEditChange(this);">
                </div>
                <div class="m-form-item">
                    <label><b>*</b>卡片Logo:<font>点击查看<a href="javascript:;" onclick="showCardLogoModal();">更多推荐图片</a></font></label>
                    <div>
                        <a href="javascript:;" class="m-file" style="float:left;margin-left: 0px;">
                            <font>上传</font>
                            <input type="file" name="upload_dycard_logo" id="upload_dycard_logo" onchange='fixWidthUpload("dycard_logo",500,500,100,0.8,true,{"type":"dycard_logo"})'>
                        </a>
                        <img src="https://res.wailian1.cn/uploads/20230824/11003713469.jpg" class="m-file-image" id="dycard_logo_show" style="max-width: 300px;">
                        <input type="hidden" name="dycard_logo" id="dycard_logo" value="" onchange="cardEditChange(this);">
                    </div>
                </div>
                <div class="m-form-item">
                    <label>渠道码:<font>(非必填) 点击查看<a target="_blank" href="https://www.tiantianwailian.com/news/1148.html" data-bs-toggle="tooltip" data-bs-placement="top" title="" data-bs-original-title="可以用于统计同一链接不同渠道码访问转化数据。">详细说明</a></font></label>
                    <div class="m-col-6 m-xs-12">
                        <input type="text" class="m-input" maxlength="10" placeholder="请输入10位以内数字/字母(非必填)" id="channel_code" oninput="value=value.replace(/[\W]/g,'')">
                    </div>
                </div>
                <div class="m-form-item">
                    <div class="m-form-btn m-mr-1" onclick="dyCardSubmit(1);" id="cardSbumitBtn">生成抖音图文卡片</div>
                    <div class="m-form-btn m-mr-1 bg-dark" onclick="dyCardSubmit(2);" id="cardCopyLink">复制抖音无风险提示链接</div>

                    <!-- <div class="m-form-btn m-mr-1" onclick="dyCardSubmit(1);" id="cardSbumitBtn">复制抖音无风险提示链接</div>
                    <div class="m-form-btn m-mr-1 bg-dark" onclick="dyCardSubmit(2);" id="cardCopyLink">抖音卡片制作教程</div> -->
                    <div style="width: 100%;height: 5px;opacity: 0;" id="copyCardLink" data-clipboard-text="">复制链接</div>
                </div>
                <div class="m-info-item">
                    <label>温馨提示:</label>
                    <div class="text">
                        <ul>
                            <li>
                                使用图文卡片功能需开通 <font class="text-danger">商家版/旗舰版</font> 会员，卡片跳转数量无限制。
                            </li>
                            <li id="weixin_notice" style="display:none;">
                                如果链接出现打不开或者提示拦截,请在后台重新制作即可(一般不会出现!)
                            </li>
                            <li id="douyin_ad">更多抖音相关业务可以联系下方广告中的客服人员。<br><img src="https://res.wailian1.cn/uploads/20230818/14064241416.jpg" style="width: 100%;max-width: 800px;"></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl-6 col-mb-6">
        <div class="phone-cotain">
            <img class="phone-black-image" src="https://nilife.oss-cn-beijing.aliyuncs.com/miniapp/iphoneXclean.png">
            <div class="phone-container">
                <div class="phone-container-browser">
                    卡片样式展示
                </div>
                <div class="card-douyin">
                    <img src="https://res.wailian1.cn/uploads/20230824/11003713469.jpg">
                    <div class="info">
                        <h3>这里是卡片标题</h3>
                        <h5>这里是卡片描述，您可以随意编辑描述内容！</h5>
                    </div>
                </div>
                <div class="card-zhihu" style="display: none;">
                    <div class="info">
                        <h3>这里是卡片标题</h3>
                        <h5>https://card.pdb2.com...</h5>
                    </div>
                    <img src="https://res.wailian1.cn/uploads/20230824/11003713469.jpg">
                </div>
                <div class="card-wechat" style="display: none;">
                    <h3>这里是卡片标题</h3>
                    <div class="describe">
                        <h5>这里是卡片描述，您可以随意编辑描述内容！</h5>
                        <img src="https://res.wailian1.cn/uploads/20230824/11003713469.jpg">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="wxcardModal" tabindex="-1" aria-labelledby="myModalLabel" aria-modal="true" role="dialog">
    <div class="modal-dialog modal-service-dialog">
        <div class="modal-content modal-service-cotain">
            <div class="modal-service-body">
                <div id="wx-card-image"></div>
                <p id="service_text">请使用微信扫码</p>
                <p class="time" id="service_time">如卡片无法打开请重新制作</p>
                <p class="describe" id="service_describe">制作成功后建议收藏卡片,然后分享时从收藏中转发即可!</p>
            </div>
            <div class="modal-service-close">
                <i class="bx bx-x-circle" onclick="choleWxCardService();"></i>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="cardLogoModal" tabindex="-1" aria-labelledby="myModalLabel" aria-modal="true" role="dialog">
    <div class="modal-dialog" style="max-width:800px;">
        <div class="modal-content m-media-body">
            <div class="m-media-header">选择推荐图片<i class="bx bx-x" onclick="hideCardLogoModal();"></i></div>
            <div class="m-media-images">
                <ul>
                </ul>
            </div>
        </div>
    </div>
</div>
@endsection
